<template>
  <div class="itemdetailspage" v-if="itemdetailslist">
    <!-- 物品详情页 -->
    <van-sticky>
      <div class="itemdetailtop">
        <div class="itemdetailtopimg" @click="$router.go(-1)"></div>
        <span class="itemdetailtoptitle animate__animated animate__heartBeat">{{
          itemdetailslist.name
        }}</span>
      </div>
    </van-sticky>
    <!-- 顶部信息 -->
    <div class="itemdetailtoplittle">
      <div class="itemdetailtoplittleimg">
        <van-image
          round
          width="50px"
          height="50px"
          :src="itemdetailslist.thumb_image_url"
        />
      </div>
      <div class="itemdetailtoplittletitle">
        <div>{{ itemdetailslist.name }}</div>
        <div>
          <span>{{ qianjiaozhi }}{{ qiankaandjiao }}</span
          >/每100克
        </div>
      </div>

      <!-- 千卡千焦 -->
      <div class="activeqian">
        <van-tabs v-model="qiankaandjiao">
          <van-tab title="千卡" name="千卡"></van-tab>
          <van-tab title="千焦" name="千焦"></van-tab>
        </van-tabs>
      </div>
    </div>

    <div class="pingzhongxinxi" style="padding: 0 10px">
      <van-tabs
        v-model="activeName"
        type="card"
        title-active-color="#1C1C1C"
        animated
        title-inactive-color="#CDC673"
        color="#EEEEEE"
      >
        <van-tab title="每100克" name="每100克">
          <ul class="vantabsul">
            <li><span>营养元素</span><span>每100克</span><span>备注</span></li>
            <li>
              <span>热量</span>
              <span>{{ qianjiaozhi }}.00{{ qiankaandjiao }}</span>
            </li>
            <li>
              <span>蛋白质</span>
              <span>{{ itemdetailslist.protein }}0克</span>
            </li>
            <li>
              <span>脂肪</span>
              <span>{{ itemdetailslist.fat }}0克</span>
            </li>
            <li>
              <span>碳水化合物</span>
              <span>{{ itemdetailslist.carbohydrate }}0克</span>
            </li>
            <li>
              <span>膳食纤维</span>
              <span>{{ itemdetailslist.fiber_dietary }}0克</span>
            </li>
          </ul>
        </van-tab>

        <van-tab
          :title="c.unit_name"
          :name="c.unit_name"
          v-for="c in itemdetailslist.units"
          :key="c.unit_id"
        >
          <ul class="vantabsul">
            <li>
              <span>营养元素</span><span>{{ c.unit }}</span
              ><span>备注</span>
            </li>
            <li>
              <span>热量</span
              ><span
                >{{ ((qianjiaozhi / 10000) * c.eat_weight * 100).toFixed(2)
                }}{{ qiankaandjiao }}</span
              >
            </li>
            <li>
              <span>蛋白质</span
              ><span>{{
                (
                  (itemdetailslist.protein / 10000) *
                  c.eat_weight *
                  100
                ).toFixed(2)
              }}</span>
            </li>
            <li>
              <span>脂肪</span
              ><span>{{
                ((itemdetailslist.fat / 10000) * c.eat_weight * 100).toFixed(2)
              }}</span>
            </li>
            <li>
              <span>碳水化合物</span
              ><span>{{
                (
                  (itemdetailslist.carbohydrate / 10000) *
                  c.eat_weight *
                  100
                ).toFixed(2)
              }}</span>
            </li>
            <li>
              <span>膳食纤维</span
              ><span>{{
                (
                  (itemdetailslist.fiber_dietary / 10000) *
                  c.eat_weight *
                  100
                ).toFixed(2)
              }}</span>
            </li>
          </ul>
        </van-tab>
      </van-tabs>

      <van-cell @click="show = true">
        <div class="moretitle">
          <span class="moreyuansu">更多营养元素</span>
        </div>
      </van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <ul class="listultitle">
          <li>
            <span>营养信息</span><span>{{ activeName }}</span
            ><span>备注</span>
          </li>
          <li v-for="item in list" :key="item.id">
            <span>{{ item.title }}</span>
            <span>{{ item.xinxi }}{{ item.danwei }}</span>
            <span></span>
          </li>
        </ul>
      </van-popup>
    </div>

    <!-- gigl值 -->
    <div
      class="gil"
      v-if="itemdetailslist.gi !== '' && itemdetailslist.gl !== ''"
    >
      <div class="gi">
        <div>GI值</div>
        <div>{{ itemdetailslist.gi }}</div>
      </div>
      <div class="gl">
        <div>GL值</div>
        <div>{{ itemdetailslist.gl }}</div>
      </div>
    </div>

    <!-- 食物红绿灯 -->
    <div class="foodhonlvse" v-if="itemdetailslist.appraise">
      <div class="tao">
        <div class="title">食物红绿灯:</div>

        <div class="foodhonlvsetitle">
          <div class="foodhonlvsetitleimg">
            <span v-if="itemdetailslist.health_light === 1"
              ><img src="../assets/image/ic_recommend.png"
            /></span>
            <span v-if="itemdetailslist.health_light === 2"
              ><img src="../assets/image/ic_suit.png"
            /></span>
            <span v-if="itemdetailslist.health_light === 3"
              ><img src="../assets/image/ic_less.png"
            /></span>
          </div>
          <div class="foodhonlvsetitlele">{{ itemdetailslist.appraise }}</div>
        </div>
      </div>
    </div>

    <div class="youhost">
      <div class="tao">
        <span>所含热量:</span>
        <div class="biyu">
          <div class="biyuimg">
            <van-image
              round
              width="50"
              height="50"
              :src="itemdetailslist.compare.target_image_url"
            />
          </div>
          <div class="biyutitle">
            <span class="lianci">X{{ itemdetailslist.compare.amount1 }}</span>
            <span class="dagai"
              >{{ itemdetailslist.compare.amount0
              }}{{ itemdetailslist.compare.unit0 }}{{ itemdetailslist.name }} =
              {{ itemdetailslist.compare.amount1
              }}{{ itemdetailslist.compare.unit1
              }}{{ itemdetailslist.compare.target_name }}
            </span>
          </div>
        </div>

        <ul class="dazhongxiao">
          <li v-for="a in itemdetailslist.units" :key="a.unit_id">
            <span>{{ a.unit }}</span>
            <span>{{ a.eat_weight }}</span>
            <span>{{ a.calory }}千卡</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    // console.log(this.$route.query.name);
    this.axios
      .get(`https://food.boohee.com/fb/v1/foods/${this.$route.query.name}`)
      .then((res) => (this.itemdetailslist = res.data))
      .then(() => {
        this.list = this.list.map((item) => {
          return { ...item, xinxi: this.itemdetailslist.ingredient[item.id] };
        });
      });
  },
  data() {
    return {
      itemdetailslist: null,
      qiankaandjiao: "千卡",
      activeName: "每100克",
      show: false,
      list: [
        {
          id: "calory",
          title: "热量",
          danwei: "千卡",
        },
        {
          id: "protein",
          title: "蛋白质",
          danwei: "克",
        },
        {
          id: "fat",
          title: "脂肪",
          danwei: "克",
        },
        {
          id: "carbohydrate",
          title: "碳水化合物",
          danwei: "克",
        },
        {
          id: "fiber_dietary",
          title: "膳食纤维",
          danwei: "克",
        },

        {
          id: "vitamin_a",
          title: "维生素A",
          danwei: "ugRE",
        },
        {
          id: "vitamin_c",
          title: "维生素C",
          danwei: "毫克",
        },
        {
          id: "vitamin_e",
          title: "维生素E",
          danwei: "毫克",
        },
        {
          id: "carotene",
          title: "胡萝卜素",
          danwei: "微克",
        },
        {
          id: "thiamine",
          title: "维生素B1",
          danwei: "毫克",
        },
        {
          id: "lactoflavin",
          title: "维生素B2",
          danwei: "毫克",
        },
        {
          id: "niacin",
          title: "烟酸",
          danwei: "毫克",
        },
        {
          id: "cholesterol",
          title: "胆固醇",
          danwei: "毫克",
        },
        {
          id: "magnesium",
          title: "镁",
          danwei: "毫克",
        },
        {
          id: "calcium",
          title: "钙",
          danwei: "毫克",
        },
        {
          id: "iron",
          title: "铁",
          danwei: "毫克",
        },
        {
          id: "zinc",
          title: "锌",
          danwei: "毫克",
        },
        {
          id: "copper",
          title: "铜",
          danwei: "毫克",
        },
        {
          id: "manganese",
          title: "猛",
          danwei: "毫克",
        },
        {
          id: "kalium",
          title: "钾",
          danwei: "毫克",
        },
        {
          id: "phosphor",
          title: "磷",
          danwei: "毫克",
        },
        {
          id: "natrium",
          title: "钠",
          danwei: "毫克",
        },
        {
          id: "selenium",
          title: "晒",
          danwei: "毫克",
        },
      ],
    };
  },
  computed: {
    qianjiaozhi() {
      return this.qiankaandjiao === "千卡"
        ? this.itemdetailslist.calory
        : parseInt(this.itemdetailslist.joule);
    },
    //100克
    oneyaun() {
      // console.log(123);
      this.itemdetailslist.ingredient.forEach((item) => {
        console.log(String.toString(item));
      });
      return 123;
    },
  },
};
</script>

<style lang="less" scoped>
.itemdetailspage {
  width: 100%;
  position: relative;
  // background: #f6f6f6;
  .itemdetailtop {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;

    border-bottom: 1px solid gray;
    .itemdetailtopimg {
      width: 40px;
      height: 40px;
      background: url("../assets/image/ic_back_dark_center.png");
      background-size: cover;
      background-position: center;
    }
    .itemdetailtoptitle {
      font-size: 18px;
    }
  }
  .itemdetailtoplittle {
    width: 100%;

    padding: 10px 10px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    // border-bottom: 1px solid gray;
    box-shadow: 0px 1px 2px gray;
    .itemdetailtoplittleimg {
      width: 15%;
    }
    .itemdetailtoplittletitle {
      display: flex;
      flex-direction: column;
      div {
        margin-top: 5px;
        span {
          font-size: 25px;
        }
      }
    }
    .activeqian {
      position: absolute;
      right: 10px;
      bottom: 0;
    }
  }

  .pingzhongxinxi {
    width: 100vw;
    // border-bottom: 1px solid gray;
    box-shadow: 0px 0px 2px rgb(109, 109, 109);
    margin: 15px 0;
    .vantabsul {
      padding: 5px 0;
      li {
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid gray;
        &:nth-child(1) {
          color: gray;
        }
        span {
          font-size: 15px;
          &:nth-child(1) {
            width: 50%;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &:nth-child(3) {
            width: 10%;
          }
        }
      }
    }
  }
  .moretitle {
    display: flex;
    justify-content: center;
    align-items: center;
    .moreyuansu {
      color: gray;
    }
  }

  .gil {
    width: 100%;
    margin: 10px 0;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 2px rgba(131, 131, 131, 0.466);
    div {
      padding: 2px 0;
      flex: 1;
      display: flex;
      color: red;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        border-bottom: 0px;
      }
    }
    .gi {
      border-bottom: 1px solid rgba(128, 128, 128, 0.452);
    }
    .gl {
      border-bottom: 1px solid rgba(128, 128, 128, 0.438);
    }
  }
  .more {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    z-index: 1;
  }
  .foodhonlvse {
    width: 100%;
    margin: 15px 0;
    box-shadow: 0px 0px 3px rgb(129, 129, 129);

    .tao {
      padding: 10px 10px;
      .title {
        font-size: 12px;
      }
      .foodhonlvsetitle {
        display: flex;
        margin: 10px 0;
        .foodhonlvsetitleimg {
          width: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            img {
              width: 90%;
              vertical-align: middle;
            }
          }
        }
        .foodhonlvsetitlele {
          flex: 1;
          font-size: 12px;
        }
      }
    }
  }
  .youhost {
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 2px gray;
    .tao {
      padding: 10px 10px;
      display: flex;
      flex-direction: column;
      //   border: 1px solid red;
      .biyu {
        width: 100%;
        display: flex;
        border-bottom: 1px solid rgba(128, 128, 128, 0.411);
        padding: 8px 0;
        .biyuimg {
          width: 15%;
          margin-right: 10px;
          img {
            width: 100%;
          }
        }
        .biyutitle {
          display: flex;
          flex-direction: column;
          margin: 10px 0;

          .lianci {
            color: red;
            font-size: 18px;
          }
          .dagai {
            font-size: 15px;
            color: gray;
          }
        }
      }
      .dazhongxiao {
        li {
          padding: 5px 0;
          border-bottom: 1px solid rgba(128, 128, 128, 0.404);
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 15px;

          span {
            &:nth-child(1) {
              width: 40%;
            }
            &:nth-child(2) {
              color: gray;
            }
            &:nth-child(3) {
              color: gray;
            }
          }
          &:last-child {
            border-bottom: 0px;
          }
        }
      }
    }
  }
  .listultitle {
    width: 100%;
    li {
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid gray;
      padding: 10px 10px;
      font-size: 0.8rem;
      &:nth-child(1) {
        color: gray;
      }
      span {
        &:nth-child(1) {
          width: 50%;
          font-weight: bold;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &:nth-child(3) {
          width: 10%;
        }
      }
    }
  }
}
</style>